.wrapper, .containner{
    margin: 0 auto;
    width:960px;
    background: #ccc;
}
/*header*/
    .header{

        position:relative;
        background: #333;
    }
        .header .logo{
            background: #666;
            text-indent: -999999px;
            margin-top:10px;
            margin-bottom:10px;
        }
        a.logo, span.logo{
            display: block;
        }
        .banner{
            background: #666;
        }
/*Navigation*/
.mainNav{
    height:32px;
    background: #666;
}

    .mainNav li{
        display: block;
        padding-right:10px;
        position: relative;
    }

        .mainNav li a{
            font-size:12px;
            text-decoration: none;
            text-transform: capitalize;
            display: block;
            padding-left: 10px;
        }
            .mainNav li .sub-menu{
                width:150px;
                position: absolute;
                display: none;
                background: #363636;
            }
            .mainNav li:hover .sub-menu{
                display:block;
            }
            .horizontal li .sub-menu{
                top:32px;
                left:0;
            }
                .mainNav li .sub-menu li{

                }
                    .mainNav li .sub-menu li a{
                        font-size:11px;
                    }
/**mainNav type horizontal **/
ul.horizontal{
    line-height: 32px;
}
    ul.horizontal li{
        float:left;
    }

/*mainNav type vertical*/
ul.vertical li{
        float:none;
}
/*primary content*/
.primary{
    margin-top:20px;
    width:100%;
    background: #333;
    min-height: 200px;
}
.columns,
.columns12:before,
.columns12:after,
.columns16:after,
.columns16:before,
.columns24:after,
.columns24:before{
    content: ".";
    display: block;
    overflow: hidden;
    visibility: hidden;
    width:0;
    height:0;
}
.columns,
.columns12:after,
.columns16:after,
.columns24:after{
    clear:both
}
.col{
    display: inline;
    float:left;
    margin-left:10px;
    margin-right:10px;
}
.columns24 .col{
    margin-left:5px;
    margin-right: 5px
}
/**
* 12 columns width base by 960 grid system frame work
* start width1 = 60. +80 (ex: .width2 = 140px, width3 = 220px ..)
* width[n] = 60 + (n-1)*80;
*/
.columns12 .width1 {width: 60px}
.columns12 .width2 {width: 140px}
.columns12 .width3,
.columns16 .width4
{
    width: 220px
}
.columns12 .width4 {width: 300px}
.columns12 .width5 {width: 380px}
.columns12 .width6,
.columns16 .width8
{
    width: 460px
}
.columns12 .width7 {width: 540px}
.columns12 .width8 {width: 620px}
.columns12 .width9,
.columns16 .width12
{
    width: 700px
}
.columns12 .width10{width: 780px}
.columns12 .width11{width: 860px}
.columns12 .width12,
.columns16 .width16
{
    width: 940px
}
/** 16 columns width base by 960 grid system frame work
* start in .width1 = 40px. after +60px. (ex: width2 = 100px, width3 = 160px ..)
* width[n] = 40 + (n-1)*60
*/
.columns16 .width1 {width: 40px}
.columns16 .width2 {width: 100px}
.columns16 .width3 {width: 160px}
.columns16 .width5 {width: 280px}
.columns16 .width6 {width: 340px}
.columns16 .width7 {width: 400px}
.columns16 .width9 {width: 520px}
.columns16 .width10{width: 580px}
.columns16 .width11{width: 640px}
.columns16 .width13{width: 760px}
.columns16 .width14{width: 820px}
.columns16 .width15{width: 880px}
/** 24 columns Width based by 960 grid system
* start in width1 = 30px. after + 40px. (ex: width2 = 70px, width3 = 100px ...)
* width[n] = 30 + (n-1)*40
*/
.columns24 .width1 {width: 30px}
.columns24 .width2 {width:70px}
.columns24 .width3 {width:110px}
.columns24 .width4 {width:150px}
.columns24 .width5 {width:190px}
.columns24 .width6 {width:230px}
.columns24 .width7 {width:270px}
.columns24 .width8 {width:310px}
.columns24 .width9 {width:350px}
.columns24 .width10{width:390px}
.columns24 .width11{width: 430px}
.columns24 .width12{width:470px}
.columns24 .width13{width:510px}
.columns24 .width14{width:550px}
.columns24 .width15{width:590px}
.columns24 .width16{width:630px}
.columns24 .width17{width:670px}
.columns24 .width18{width:710px}
.columns24 .width19{width:750px}
.columns24 .width20{width:790px}
.columns24 .width21{width:830px}
.columns24 .width22{width:870px}
.columns24 .width23{width:910px}
.columns24 .width24{width:950px}
/* absolute columns*/

/*column 2*/
/* alpha = first & omega = last*/
.alpha{
    margin-left:0;
}
.omega{
    margin-right:0;
}
/*footer*/
.footer{
   min-height:30px;
    background: #333;
    margin-top:20px;

}